<template>
	<view class="conter">
		<!-- 头部 -->
		<view style="display: flex; justify-content: space-between; width: 680rpx">
			<view class="u-search">
				<u-search :show-action="false" searchIcon="" bg-color="#212121" placeholder="" @confirm="search" v-model="keyword"></u-search>
			</view>
			<view class="return_box" @click="createTian">
				<!-- 创建工会 -->
				<image src="../../static/images/tiantuan/index-home.png" mode=""></image>
			</view>
		</view>
		<!-- 头部 -->
		<!-- 中间筛选 -->
		<view class="duck_nest">
			<image @click="gotiantuan" src="../../static/images/tiantuan/index-tiantuan.png" mode=""></image>
			<image @click="public" src="../../static/images/tiantuan/index-yawo.png" mode=""></image>
			<image @click="public" src="../../static/images/tiantuan/index-yade.png" mode=""></image>
			<image @click="warehouse" src="../../static/images/tiantuan/index-cang.png" mode=""></image>
		</view>
		<!-- 中间筛选 -->
		<!-- 天团排行榜 -->
		<view class="Listof_top">
			<view class="title">
				<view class="hot-box">天团热度排行榜</view>
				<view class="rule-box">
					<image src="../../static/images/tiantuan/index-rule.png" mode=""></image>
					<view class="">天团规则和奖励</view>
				</view>
			</view>
			<u-list height="1000rpx" @scrolltolower="scrolltolower">
				<view class="tiantuan_box" v-if="guildMemberList.length != 0">
					<!-- list列表-->
					<u-list-item v-for="(item, index) in guildMemberList" :key="index">
						<view class="tuan_one" @click="goTianDetail(item)">
							<!-- 加入工会按钮 -->
							<view class="button">
								<image src="../../static/images/tiantuan/index-jia.png" mode=""></image>
							</view>
							<!-- 加入工会按钮 -->
							<!-- 头像 名字 介绍 -->
							<view class="Price_box">
								<view class="heder_box">
									<u--image width="100rpx" height="100rpx" radius="50%" :src="imgUrl + item.guildAvatar" alt=""></u--image>
									<!-- 头像 -->
								</view>
								<view class="name_box">{{ item.guildName }}</view>
								<view class="propaganda">带你走上发财路</view>
							</view>
							<!-- 头像 名字 介绍 -->
							<view class="number_box">
								<view style="display: flex">
									<view class="img-icon">
										<image src="../../static/images/tiantuan/index-user.png" mode=""></image>
										<!-- 图标 -->
									</view>
									<view class="">{{ item.guildCount }}/{{ item.level == 'A' ? 100 : 260 }}</view>
								</view>
								<view style="display: flex">
									<view class="img-icon" style="margin-top: 2rpx;">
										<image src="../../static/images/tiantuan/index-money.png" mode=""></image>
										<!-- 图标 -->
									</view>
									<view class="">{{ item.influence }}</view>
								</view>
							</view>
						</view>
					</u-list-item>
					<!-- list列表-->
				</view>
				<view v-if="guildMemberList.length == 0">
					<image style="width: 280rpx; height: 280rpx; margin: 280rpx 210rpx" src="../../static/images/fighting.gif" mode=""></image>
				</view>
			</u-list>
		</view>
		<!-- 天团排行榜 -->
	</view>
</template>

<script>
import { getGuildList, joinGuild, checkMyGuild } from '@/api/union/union.js';
import config from '@/config.js';
import { h } from 'vue';
export default {
	data() {
		return {
			keyword: '', //搜索 绑定的 k
			show: false,
			curPage: 1,
			curPageSize: 15,
			guildMemberList: [],
			imgUrl: config.gillUrl,
			loadStatus: 'loadmore',
			status: 'loadmore',
			uniId: null,
			guildId: ''
		};
	},
	onShow() {
		this.guildMemberList = [];
		this.getGuildMemberList();
		this.isMy();
	},
	methods: {
		async isMy() {
			const data = await checkMyGuild();
			if (data.code === 200) {
				this.data = data.data;
				this.guildId = data.data.guildId;
			}
		},
		public() {
			this.$modal.showToast('暂未开放');
		},
		gobuck() {
			uni.switchTab({
				url: '/pages/work/home'
			});
		},
		gotiantuan() {
			uni.navigateTo({
				url: '/pages/tiantuan/tiantuan'
			});
		},
		goTianDetail(item) {
			if (item.myGuild == '1') {
				uni.navigateTo({
					url: `/pages/tiantuan/mytuan?type=${item.myGuild}&id=${item.id}`
				});
			} else {
				uni.navigateTo({
					url: `/pages/tiantuan/tuanDetail?type=${item.myGuild}&id=${item.id}`
				});
			}
		},
		warehouse() {
			uni.navigateTo({
				url: `/pages/tiantuan/wareHouse?guildId=${this.guildId}`
			});
		},
		createTian() {
			uni.navigateTo({
				url: '/pages/tiantuan/createTian'
			});
		},
		//申请加入天团
		async applyGuild(item) {
			let param = {};
			param.uniId = item.id;
			const data = await joinGuild(param);
			if (data.code == 200) {
				this.$modal.showToast('申请成功');
			} else {
				this.$modal.showToast(data.msg);
			}
		},
		// 加入天团
		async joinGuide() {
			let param = {};
			param.uniId = this.uniId;
			const data = await joinGuild(param);
			if (data.code == 200) {
				this.$modal.showToast('申请成功');
				this.show = false;
			} else {
				this.$modal.showToast(data.msg);
				this.show = false;
			}
		},
		//排行榜列表
		async getGuildMemberList() {
			let param = {};
			param.curPage = this.curPage;
			param.curPageSize = this.curPageSize;
			const data = await getGuildList(param);
			let _this = this;
			// 使用map方法遍历 data.data.pageData 里面的数据传递给 _this.guildMemberList
			data.data.pageData.map((i) => {
				_this.guildMemberList.push(i);
			});
			this.totalSize = data.data.totalSize;
		},
		// list加载事件
		scrolltolower() {
			//加载时候判断是否还有下一页
			if (this.guildMemberList.length < this.totalSize) {
				this.curPage++;
				//则还有下一页
				this.status = 'loadmore';
				this.getGuildMemberList();
			} else {
				this.curPage = 1;
				this.status = 'nomore';
			}
		}
	}
};
</script>

<style scoped lang="less">
::v-deep .u-search__content {
	width: 481rpx;
	height: 87rpx;
	border-radius: 44rpx;
	border: 3rpx solid #2f2f2f !important;
}
page {
	background-color: #1a1a1a;
}
.conter {
	padding: 90rpx 34.88rpx 0;
	// 头部
	.u-search {
		width: 561rpx;
		height: 87rpx;
	}

	.return_box {
		width: 87rpx;
		height: 87rpx;
		margin-top: 5rpx;
		border-radius: 50%;
		image {
			width: 100%;
			height: 100%;
		}
	}

	// 头部
	// 中间筛选
	.duck_nest {
		display: flex;
		width: 680rpx;
		margin-top: 60rpx;
		justify-content: space-between;
		image {
			width: 150rpx;
			height: 166rpx;
		}
	}

	// 中间筛选
	// 排行榜
	.Listof_top {
		width: 680rpx;
		margin-top: 44rpx;

		.title {
			display: flex;
			justify-content: space-between;
			.hot-box {
				color: #ffffff;
				font-size: 31rpx;
				font-family: 'font';
				font-weight: 700;
			}
			.rule-box {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				font-family: zcoolqingkehuangyouti, zcoolqingkehuangyouti;
				font-weight: 400;
				color: #9e9e9e;
				image {
					width: 28rpx;
					height: 28rpx;
					opacity: 1;
					margin-right: 7rpx;
				}
			}
		}

		.tiantuan_box {
			width: 680rpx;
			display: flex;
			flex-wrap: wrap;
			margin-top: 34.88rpx;
			justify-content: space-between;

			.tuan_one {
				width: 323rpx;
				height: 372rpx;
				padding: 27rpx;
				border-radius: 42rpx;
				margin-bottom: 34.88rpx;
				background-color: #1f1f1f;
				border: 3rpx solid #2f2f2f;
			}

			.button {
				width: 49rpx;
				height: 49rpx;
				border-radius: 50%;
				image {
					width: 49rpx;
					height: 49rpx;
					border-radius: 50%;
				}
			}

			.Price_box {
				margin-top: -27rpx;

				.heder_box {
					width: 106rpx;
					height: 106rpx;
					border-radius: 50%;
					margin: auto;
				}

				.name_box {
					color: #ffffff;
					font-weight: 400;
					font-size: 42rpx;
					margin-top: 25rpx;
					text-align: center;
					font-family: 'simplified';
				}

				.propaganda {
					color: #8e8e8e;
					font-size: 21rpx;
					font-weight: 400;
					margin-top: 25rpx;
					text-align: center;
					font-family: 'simplified';
				}
			}
		}
		.number_box {
			color: #8e8e8e;
			display: flex;
			font-size: 21rpx;
			font-weight: 400;
			margin-top: 35rpx;
			font-family: 'simplified';
			justify-content: space-between;
			.img-icon {
				width: 24rpx;
				height: 24rpx;
				margin-right: 5rpx;
				image {
					width: 24rpx;
					height: 24rpx;
				}
			}
		}
	}

	// 排行榜
}
</style>
